<div id="floatlistBar" class="floatlist-bar" tabindex="0" style="display: none;" onblur="closeFloatlistBar()">
	<div id="floatlistTable" class="floatlist-table">
		<div class="floatlist-tr">
			<div class="floatlist-column-auto">XXXX</div>
			<div class="floatlist-column-regular">XXXX</div>
		</div>
	</div>
	<div id="floatlistBottom" class="floatlist-bottom">正在加载中...</div>
</div>

<script type="text/javascript">
	function showFloatlistBar(flag, parentId) {
	    var parentRect = getItem(parentId).getBoundingClientRect();
	    var floatlistBar = getItem('floatlistBar');

	    floatlistBar.style.left = parentRect.left + 'px';
	    floatlistBar.style.top = parentRect.top + parentRect.height + 'px';
	    floatlistBar.style.display = '';

	    if (flag == 'loading') {
	        setDisplay('floatlistTable', 'none');
	        setDisplay('floatlistBottom', '');
	        setHtml('floatlistBottom', '正在加载中...');
	    }
	    else if (flag == 'empty') {
	        setDisplay('floatlistTable', 'none');
	        setDisplay('floatlistBottom', '');
	        setHtml('floatlistBottom', '没有搜索到任何信息');
	    }
	    else {
	        setDisplay('floatlistTable', '');
	        setDisplay('floatlistBottom', 'none');
	    }
	}

	function closeFloatlistBar() {
	    setDisplay('floatlistBar', 'none');
	}

	function loadFloatlist(column, list, parentId, isOnscroll = true) {
		//加载信息列表
		var html = '';
		for (var i = 0; i < list.length; i++) {
			html += '<div class="floatlist-tr">';

			for (var m = 0; m < column.length; m++) {
				if (column[m].width == 'auto') {
					html += '<div class="floatlist-column-auto"';

					if (column[m].click != null && column[m].click != '') {
						var param = '';
						var obj = column[m].clickParam.split(',');
						for (var n = 0; n < obj.length; n++) {
							if (n >= obj.length - 1) {
								param += '\'' + list[i][obj[n]] + '\'';
							}
							else {
								param += '\'' + list[i][obj[n]] + '\', ';
							}
						}

						html += ' onclick="' + column[m].click + '(' + param + ')"';
					}
				}
				else {
					html += '<div class="floatlist-column-regular"';
				}

				if (column[m].color != null && column[m].color != '') {
					html += ' style="color:' + column[m].color + '"';
				}

				html += '>';
				html += list[i][column[m].valueid];
				html += '</div>';
			}

			html += '</div>';
		}
		setHtml('floatlistTable', html);

		if (list == '' || list.length == 0) {
            //提示【没有数据】
            showFloatlistBar('empty', parentId);
        }
        else {
            //隐藏底部栏，显示信息列表
            showFloatlistBar('list', parentId);
        }

		if (isOnscroll) {
			document.onscroll = function() {
			    closeFloatlistBar();
			}
		}
	}
</script>

<style type="text/css">
	.floatlist-bar
	{
		position: fixed;
		z-index: 19700914;
	}

	.floatlist-table
	{
		width: 840px;
		background-color: white;
		border: 1px solid #EFEFF4;
	}

	.floatlist-tr
	{
		display: -webkit-flex;
	    -webkit-flex-direction: row;
	    -webkit-align-items: center;
	}

	.floatlist-tr:hover
	{
		background-color: #f5f7fa;
		display: -webkit-flex;
	    -webkit-flex-direction: row;
	    -webkit-align-items: center;
	}

	.floatlist-column-regular
	{
		-webkit-flex: none;
		color: #b1b2b3;
		font-size: 14px;
		padding: 10px 10px 10px 20px;
	}

	.floatlist-column-auto
	{
		-webkit-flex: auto;
		color: #333333;
		font-size: 14px;
		padding: 10px 10px;
		cursor: pointer;
	}

	.floatlist-column-auto:hover
	{
		-webkit-flex: auto;
		color: blue;
		font-size: 14px;
		text-decoration: underline;
		padding: 10px 10px;
		cursor: pointer;
	}

	.floatlist-bottom
	{
		width: 420px;
		height: 60px;
		line-height: 60px;
		color: #333333;
		font-size: 14px;
		text-align: center;
		background-color: white;
		border: 1px solid #EFEFF4;
	}
</style>